<template>
  <BasicModal
    width="800px"
    :title="t('component.upload.preview')"
    class="upload-preview-modal"
    v-bind="$attrs"
    @register="register"
    :showOkBtn="false"
  >
    <FileList
      :dataSource="fileListRef"
      :columns="columns"
      :actionColumn="actionColumn"
    />
  </BasicModal>
</template>
<script lang="ts">
import { defineComponent, watch, ref } from 'vue'
//   import { BasicTable, useTable } from '@/components/Table';
import FileList from './FileList.vue'
import { BasicModal, useModalInner } from '@/components/Modal'
import { previewProps } from './props'
import { PreviewFileItem } from './typing'
import { createPreviewColumns, createPreviewActionColumn } from './data'
import { useI18n } from '@admin/locale'
import { isArray, downloadByUrl } from '@admin/utils'

export default defineComponent({
  components: { BasicModal, FileList },
  props: previewProps,
  emits: ['list-change', 'register', 'delete'],
  setup(props, { emit }) {
    const [register, { closeModal }] = useModalInner()
    const { t } = useI18n()

    const fileListRef = ref<PreviewFileItem[]>([])
    watch(
      () => props.value,
      (value) => {
        if (!isArray(value)) value = []
        fileListRef.value = value
          .filter((item) => !!item)
          .map((item) => {
            return {
              url: item,
              type: item.split('.').pop() || '',
              name: item.split('/').pop() || '',
            }
          })
      },
      { immediate: true },
    )

    // 删除
    function handleRemove(record: PreviewFileItem) {
      const index = fileListRef.value.findIndex(
        (item) => item.url === record.url,
      )
      if (index !== -1) {
        const removed = fileListRef.value.splice(index, 1)
        emit('delete', removed[0].url)
        emit(
          'list-change',
          fileListRef.value.map((item) => item.url),
        )
      }
    }

    // // 预览
    // function handlePreview(record: PreviewFileItem) {
    //   const { url = '' } = record;
    //   createImgPreview({
    //     imageList: [url],
    //   });
    // }

    // 下载
    function handleDownload(record: PreviewFileItem) {
      const { url = '' } = record
      downloadByUrl({ url })
    }

    return {
      t,
      register,
      closeModal,
      fileListRef,
      columns: createPreviewColumns() as any[],
      actionColumn: createPreviewActionColumn({
        handleRemove,
        handleDownload,
      }) as any,
    }
  },
})
</script>
<style lang="less">
.upload-preview-modal {
  .ant-upload-list {
    display: none;
  }

  .ant-table-wrapper .ant-spin-nested-loading {
    padding: 0;
  }
}
</style>
